% rebase('layout.tpl', title=title, year=year, jsfiles=['jquery-1.10.2.min.js', 'vue.min.js', 'echarts.min.js'])

<div class="btn-group" role="group" aria-label="...">
    <a href="/log/download" class="btn btn-default">Download Logs</a>
</div>
<hr/>
<div id="app">
    <button onclick="update_mac_list()">Update</button>
    <div id="main" style="width: 1000px;height:600px;"></div>
</div>


<script>
    var data = {
    }
    var app = new Vue({
        delimiters: ['${', '}'],
        el: '#app',
        data: data,
        computed: {
        },
        methods: {
        }
    });


    option = {
        title: {
            text: 'Cyce Time'
        },
        legend: {
            data: [],
            align: 'left'
        },
        toolbox: {
            // y: 'bottom',
            feature: {
                // magicType: {
                //     type: ['stack', 'tiled']
                // },
                dataView: {},
                saveAsImage: {
                    pixelRatio: 2
                }
            }
        },
        tooltip: {},
        xAxis: {
            name: 'cycle',
            data: [],
            silent: false,
            splitLine: {
                show: false
            }
        },
        yAxis: {
            name: 'Node',
            type: 'category',
            splitLine: {
                show: true
            },
            data: []
        },
        dataZoom: [
            {   // 这个dataZoom组件，默认控制x轴。
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                xAxisIndex: [0],
                start: 80,      // 左边在 10% 的位置。
                end: 100         // 右边在 60% 的位置。
            },
            {   // 这个dataZoom组件，默认控制y轴。
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                yAxisIndex: [0],
                start: 0,      // 左边在 10% 的位置。
                end: 100         // 右边在 60% 的位置。
            },
            // {   // 这个dataZoom组件，也控制x轴。
            //     type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
            //     start: 10,      // 左边在 10% 的位置。
            //     end: 60         // 右边在 60% 的位置。
            // },
            // {   // 这个dataZoom组件，也控制x轴。
            //     type: 'select', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
            //     xAxisIndex: [0],
            //     start: 10,      // 左边在 10% 的位置。
            //     end: 60         // 右边在 60% 的位置。
            // },
        ],
        series: [],
        // animationEasing: 'elasticOut',
        // animationDelayUpdate: function (idx) {
        //     return idx * 5;
        // }
    };
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(option);
    myChart.showLoading();

    var mac_list = [];
    function update_mac_list() {
        $.get('/ajax/log/summary')
            .done(function (data) {
                myChart.hideLoading();
                // console.log(data);
                mac_list = JSON.parse(data.mac_list);
                mac_list.pop();
                mac_list.pop();
                // mac_list.pop();
                // mac_list.pop();
                // console.log(mac_list);
                var series = [];
                // mac_list.forEach(function (mac) {
                for (var i = 0; i < mac_list.length; i++) {
                    series = series.concat([{
                        type: 'scatter',
                        data: option.series[i] ? option.series[i].data : [],
                        symbolSize: function (val) {
                            return val[2] * 0.5;
                        },
                    }]);
                }
                // console.log(series);
                option.series = series;
                option.yAxis.max = mac_list.length - 1;
                // option.yAxis.data = mac_list;
                update_data();
            })
            .fail(function (data) {
                console.log('Error: ' + data);
            })
    }
    function update_data() {
        for (var idx = 0; idx < mac_list.length; idx++) {
            update_data_of_mac(mac_list[idx], idx);
        }
    }
    function update_data_of_mac(mac, idx) {
        $.get('/ajax/log/summary/' + mac)
            .done(function (data) {
                // console.log(data);
                plan = JSON.parse(data.plan);
                // console.log(plan);
                // console.log(plan == null);
                if (plan == null) {
                    return;
                }
                set_data(plan, idx);
            })
            .fail(function (data) {
                console.log('Error: ' + data);
            });
    }

    function set_data(plan, idx) {
        var pxe_list = plan.pxe_list;
        var data = [];
        pxe_list.forEach(
            function (pxe) {
                data = data.concat(
                    pxe.log.map(
                        function (i) {
                            // return i.dt;
                            // return idx;
                            return [i.count, idx, i.dt];
                            // return {
                            //     'name': 'time',
                            //     'value': i.dt,
                            // };
                        }));
            });
        // console.log(data);

        // console.log('>>>>');
        // console.log(option);
        // var name = plan.client.rack + '-' + plan.client.location;
        var name = plan.client.rack + '/' + plan.client.location + '(' + plan.mac + ')';
        option.legend.data[idx] = name;
        option.yAxis.data[idx] = plan.client.rack + '/' + plan.client.location;
        // console.log(option);
        // console.log('<<<<');
        option.series[idx].name = name;
        option.series[idx].data = data;
        // var data0 = option.series[idx].data;
        // var delta_n = data.length - data0.length;
        // // console.log(delta_n);
        // for (var i = 0; i < delta_n; i++) {
        //     data0.push(data.pop());
        // }

        data0 = option.xAxis.data;
        delta_n = data.length - data0.length;
        // console.log(delta_n);
        var base = data0.length;
        for (var i = 0; i < delta_n; i++) {
            data0.push(base + i + 1);
        }
        // console.log('>>>>');
        // console.log(option);
        myChart.setOption(option);
        // console.log(option);
        // console.log('<<<<');
    };

    update_mac_list();
    // var timer = setInterval(update_mac_list, 5000);

</script>